<template>
  <div class="message">
    <a-row class="comm-main" type="flex" justify="center" :gutter="5">
      <a-col class="comm-left content" :xs="20" :sm="14" :md="13" :lg="14" :xl="13">
        <a-card class="box-card" shadow="hover">
          <div class="title">
            留言板
            <span>({{total}})</span>
          </div>
          <!-- 留言列表 -->
          <div class="comments-list">
            <div class="comment" v-for="item in messageList" :key="item.id">
              <div class="cm-top">
                <p class="info">
                  <span class="name">{{item.nickName}}</span>
                  <span class="time">{{item.addTime}}</span>
                </p>
                <p class="handle">
                  <span class="floor">{{item.sort}}楼</span>
                </p>
              </div>
              <div class="cm-content">{{item.content}}</div>
            </div>
            <div :class="{isShow:isShow}">
              <a-spin :spinning="spinning" v-if="spinning" class="spinning" />
              <p class="loadmore" v-else>
                <span @click="onLoadMore">加载更多&nbsp;</span>
                <span @click="onLoadMore">
                  <a-icon type="double-right" class="more-icon" />
                </span>
              </p>
            </div>
            <p class="loadmore" v-if="isEnd">
              <span>没有更多留言...</span>
            </p>
          </div>
          <!-- 留言盒子 -->
          <div class="comment-box">
            <p class="label">评论</p>
            <a-textarea
              class="content"
              placeholder="来都来了，说点什么把"
              :rows="textareaRow"
              @click="changeRow"
              v-model.trim="content"
            />
            <p class="label">
              您的昵称
              <span class="important">*</span>
            </p>
            <a-input class="nickname" placeholder="必填" v-model.trim="nickname"></a-input>
            <p class="label">Email</p>
            <a-input class="email" placeholder="不是必填项，不公开" v-model.trim="email"></a-input>
            <a-button class="btn" @click="releaseComment">发表</a-button>
          </div>
        </a-card>
      </a-col>
      <a-col class="comm-left info" :xs="0" :sm="6" :md="5" :lg="5" :xl="5">
        <a-affix>
          <a-card class="box-card" shadow="hover">
            <Author />
          </a-card>
        </a-affix>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import Author from "../Author/index";
export default {
  components: {
    Author,
  },
  created() {
    this.getMessage();
  },
  data() {
    return {
      isRelease: false,
      messageList: [],
      total: 0,
      textareaRow: 4,
      content: "",
      nickname: "",
      email: "",
      page: 1,
      spinning: false, // 控制加载组件展示
      isEnd: false, // 控制没有更多留言
      isShow: false, // 控制加载更多和图标那个盒子的展示
    };
  },
  methods: {
    // 加载更多
    async onLoadMore() {
      this.page++;
      this.spinning = true;
      let { data: res } = await this.$http.get("/default/getMessageList", {
        params: { page: this.page },
      });
      this.messageList = res.data;
      this.spinning = false;
      if (res.data.length == this.total) {
        console.log("没有更多数据");
        this.isShow = this.spinning = this.isEnd = true;
      }
    },
    // 改变textarea的行数
    changeRow() {
      this.textareaRow = 6;
    },
    // 发布评论
    async releaseComment() {
      if (!this.isRelease) {
        if (this.content == "") {
          this.$message.error("内容不能为空");
          return false;
        } else if (this.nickname == "") {
          this.$message.error("昵称不能为空");
          return false;
        } else if (this.email != "") {
          let res = this.checkEmail(this.email);
          if (res == "邮箱格式不正确") {
            this.$message.error(res);
            return false;
          }
        }
        let dataProp = {};
        dataProp.nickName = this.nickname;
        dataProp.content = this.content;
        dataProp.email = this.email;
        dataProp.addTime = parseInt(new Date().getTime() / 1000);
        dataProp.status = 0;
        this.isRelease = true;
        this.$message.success('留言发布成功，待管理员审核');
        let { data: res } = await this.$http.post(
          "default/addMessage",
          dataProp
        );
        if (res.status == 200) {
          this.nickname = "";
          this.content = "";
          this.email = "";
        } else {
          this.$message.error(res.msg);
        }
      } else {
        this.$message.warning("一天只能发送一条留言");
      }
    },
    // 验证email
    checkEmail(email) {
      const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (reg.test(email)) {
        return "邮箱格式正确";
      } else {
        return "邮箱格式不正确";
      }
    },
    // 获取留言信息
    async getMessage() {
      let { data: res } = await this.$http.get("/default/getMessageList", {
        params: { page: this.page },
      });
      this.messageList = res.data;
      this.total = res.total;
      if (res.data.length == this.total) {
        this.isShow = this.spinning = this.isEnd = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-80px);
    opacity: 0;
  }
  25% {
    transform: translateX(-60px);
    opacity: 0.2;
  }
  50% {
    transform: translateX(-40px);
    opacity: 0.3;
  }
  75% {
    transform: translateX(-20px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes fade-right {
  0% {
    transform: translateX(80px);
    opacity: 0;
  }
  25% {
    transform: translateX(60px);
    opacity: 0.2;
  }
  50% {
    transform: translateX(40px);
    opacity: 0.4;
  }
  75% {
    transform: translateX(20px);
    opacity: 0.6;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
.box-card {
  ::selection {
    background: #3b4348;
  }
}
.message {
  min-height: 100vh;
  background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605544655804&di=532689af4f04350d17780548acc3ca32&imgtype=0&src=http%3A%2F%2Fwww.bizhidaquan.com%2Fd%2Ffile%2Fdongman%2Fkatong%2F2014-11-13%2Fd22d6cce5b5259bf25d0d63f928ef80e.jpg")
    no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  overflow: hidden;
  .content {
    animation: fade-left 0.3s ease-out;
    .ant-card {
      background: rgba(255, 255, 255, 0.7);
    }
  }
  .info {
    animation: fade-right 0.3s ease-out;
    .ant-card {
      background: rgba(255, 255, 255, 0.75);
    }
  }
  .title {
    background-image: -webkit-linear-gradient(
      left,
      blue,
      #66ffff 10%,
      #cc00ff 20%,
      #cc00cc 30%,
      #ccccff 40%,
      #00ffff 50%,
      #ccccff 60%,
      #cc00cc 70%,
      #cc00ff 80%,
      #66ffff 90%,
      blue 100%
    );
    -webkit-text-fill-color: transparent; /* 将字体设置成透明色 */
    -webkit-background-clip: text; /* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s linear infinite;
    font-size: 1.4rem;
    font-family: "黑体";
    margin-bottom: 2.5rem;
    padding: 1.5rem 0 0 1.5rem;
  }
  .comments-list,
  .comment-box {
    font-family: Lato, "Microsoft Jhenghei", "Hiragino Sans GB",
      "Microsoft YaHei", sans-serif;
    .comment {
      margin: 2.5rem 2.5rem 0.5rem;
      border-bottom: 1px dashed #ccc;
      border-width: 1px;
      .cm-top {
        display: flex;
        justify-content: space-between;
        .info {
          .time {
            margin-left: 1rem;
            color: #999;
          }
        }
        .handle {
          color: #999;
        }
      }
      .cm-content {
        padding: 10px 100px 10px 0;
        word-break: break-all;
        word-wrap: break-word;
        white-space: pre-line;
        font-size: 1rem;
        color: #000;
      }
    }
    .loadmore {
      margin-top: 1rem;
      color: rgba(0, 0, 0, 0.5);
      font-size: 0.9rem;
      text-align: center;
      span {
        cursor: pointer;
      }
      .more-icon {
        transform: rotate(90deg);
      }
    }
    .spinning {
      display: block;
      margin-top: 1rem;
      font-size: 0.9rem;
    }
  }
  .comment-box {
    margin: 2.5rem 2.5rem 0.5rem;
    .label,
    .nickname,
    .email {
      margin: 1rem 0;
      font-size: 1rem;
      color: #555;
      .important {
        color: red;
      }
    }
    .email {
      margin-bottom: 1.5rem;
    }
    .btn {
      font-size: 14px;
      padding: 5px 60px;
      color: #fff;
      background-color: #777;
      border: 0;
      font-family: inherit;
      cursor: pointer;
      margin-bottom: 200px;
    }
    .btn:hover {
      background-color: #373737;
    }
    .nickname,
    .email {
      display: block;
      width: 50%;
    }
  }
}
.ant-input:hover,
textarea:focus,
input:focus {
  border: 1px solid #dae2f3;
  -webkit-box-shadow: none;
  box-shadow: none;
  transition: all 2s;
}
.isShow {
  display: none;
}
</style>